
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>弹出框业务类</title>
	<link rel="stylesheet" href="theme/default/layer.css">
	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script src="layer.js"></script>
	<script src="layer-dialog.js"></script>
	<style>
		html{
			margin: 0;
			padding: 0;
			width: 100%;
			/*height: 100%;*/
		    background-color: #ffffff;
		}
		body{
			display: block;
			margin: 0;
			padding: 0;
			width: calc(100% - 2px);
			/*height: calc(100% - 6px);*/
			border-radius: 12px;
			border: 1px solid #333;
		    background-color: #808080;
		    font-family: 'Arial', "微软雅黑";
		}

		::-webkit-scrollbar {
		    width: 8px;
		    height: 8px;
		}
		/*正常情况下滑块的样式*/
		body::-webkit-scrollbar-thumb {
		    background-color: rgba(0,0,0,.05);
		    border-radius: 10px;
		    -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
		}
		/*鼠标悬浮在该类指向的控件上时滑块的样式*/
		body:hover::-webkit-scrollbar-thumb {
		    background-color: rgba(0,0,0,.2);
		    border-radius: 10px;
		    -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
		}
		/*鼠标悬浮在滑块上时滑块的样式*/
		body::-webkit-scrollbar-thumb:hover {
		    background-color: rgba(0,0,0,.4);
		    -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
		}
		/*正常时候的主干部分*/
		body::-webkit-scrollbar-track {
		    border-radius: 10px;
		    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
		    background-color: white;
		}
		/*鼠标悬浮在滚动条上的主干部分*/
		body::-webkit-scrollbar-track:hover {
		    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.4);
		    background-color: rgba(0,0,0,.01);
		}

		div.layout-item{
			margin-top: 2px;
			width: 100%;
		    background-color: #666;
			border-radius: 6px;
		}
		.layout-content input{
			width: auto;
		    height: 38px;
		    color: white;
		    background-color: #1266f1;
		    display: inline-block;
		    font-weight: 400;
		    text-align: center;
		    white-space: nowrap;
		    vertical-align: middle;
		    -webkit-user-select: nlayout-item;
		    -moz-user-select: nlayout-item;
		    -ms-user-select: nlayout-item;
		    user-select: nlayout-item;
		    border: 1px solid transparent;
		    padding: 0.375rem 0.75rem;
			margin-top: 2px;
			margin-bottom: 2px;
			margin-left: 5px;
		    font-size: 1rem;
		    line-height: 1.5;
		    border-radius: 0.25rem;
		    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
		}
		.layout-accordion{
			line-height: 52px;
			/*height : 42px;
			overflow:  hidden;*/
		}
		.layout-accordion:hover{
			height: auto;
			background-color: #fff;
		    transition: all 1s;
		    
		}
		.layout-title{
			font-size: 28px;
			padding-left: 20px;
			color: #fff;
		    background-color: #333;
			border-radius: 6px;
		}
	</style>
</head>
<body>
	<h2 style="text-align: center; color: #fff; background-color: #1266f1; margin: 0; padding: 0; border-radius: 12px;line-height: 48px;">layerDialog DOC<span style="font-size: 16px;font-weight: 300;">(v1.0)</span></h2>

	<div class="layout-item">
		<div class="layout-accordion">
			<div class="layout-title">#提示框 - layerDialog.msg(message, icon, time = 0, func = false)</div>
			<div class="layout-content">
				<input type="button" value="文字提示" onclick="layerDialog.msg('提示内容', -1, 3000);">
				<input type="button" value="ICON+文字提示" onclick="layerDialog.msg('提示内容', 0, 5000);">
				<input type="button" value="加载+文字提示" onclick="layerDialog.msg('提示内容', 16, 5000);">
			</div>
		</div>
	</div>
	<div class="layout-item">
		<div class="layout-accordion">
			<div class="layout-title">#提示框 - layerDialog.msgBtn(message, icon, func = false, btn = ['确定','取消'], time = 0)</div>
			<div class="layout-content">
				<input type="button" value="按钮+文字提示" onclick="layerDialog.msgBtn('提示内容', -1, 0);">
				<input type="button" value="按钮+ICON+文字提示" 
				onclick="layerDialog.msgBtn('提示内容', 8, false, ['确定1','取消1']);">
			</div>
		</div>
	</div>

	<div class="layout-item">
		<div class="layout-accordion">
			<div class="layout-title">#普通信息框 - layerDialog.alert(title, content, icon = 0, func = false, time = 0)</div>
			<div class="layout-content">
				<input type="button" value="没标题的普通信息框" onclick="layerDialog.alert(false, '提示内容1', 3, false, 0);">
				<input type="button" value="有标题的普通信息框" onclick="layerDialog.alert('标题1', '提示内容1', 0, 'aa', 0);">
			</div>
		</div>
	</div>

	<div class="layout-item">
		<div class="layout-accordion">
			<div class="layout-title">#询问框 - layerDialog.confirm(title, content, icon = 0, yes = false, no = false, time = 0)</div>
			<div class="layout-content">
				<input type="button" value="没标题的普通询问框" onclick="layerDialog.confirm(false, '提示内容1', 3, false, false, 0);">
				<input type="button" value="有标题的普通询问框" onclick="layerDialog.confirm('标题1', '提示内容1', 0, 'aa', false, 0);">
			</div>
			<div class="layout-descrip">
			</div>
		</div>
	</div>

	<div class="layout-item">
		<div class="layout-accordion">
			<div class="layout-title">#加载层 - layerDialog.load(icon, func, time = 0)</div>
			<div class="layout-content">
				<input type="button" value="加载层" onclick="layerDialog.load('0', false, 0);">
				<input type="button" value="加载层" onclick="layerDialog.load('1', false, 0);">
				<input type="button" value="加载层" onclick="layerDialog.load('2', false, 0);">
			</div>
			<div class="layout-descrip">
			</div>
		</div>
	</div>

	<div class="layout-item">
		<div class="layout-accordion">
			<div class="layout-title">#tips层 - layerDialog.tips(id, content, tips = 1, color = '#000000')</div>
			<div class="layout-content">
				<input id="a" type="button" value="上" onclick="layerDialog.tips('#a','提示内容','1','#f00');">
				<input id="b" type="button" value="右" onclick="layerDialog.tips('#b','提示内容','2','#0f0');">
				<input id="c" type="button" value="下" onclick="layerDialog.tips('#c','提示内容','3','#00f');">
				<input id="d" type="button" value="左" onclick="layerDialog.tips('#d','提示内容','4','#78BA32');">
			</div>
			<div class="layout-descrip">
			</div>
		</div>
	</div>

	<div class="layout-item">
		<div class="layout-accordion">
			<div class="layout-title">#输入层 - layerDialog.prompt(formTyp = 1, title = false, value = '', area = [auto, auto])</div>
			<div class="layout-content">
				<input type="button" value="输入层" onclick="layerDialog.prompt(0,'输入层标题','默认值','aa');">
				<input type="button" value="输入层" onclick="layerDialog.prompt(1,'输入层标题','默认值','aa');">
				<input type="button" value="输入层" onclick="layerDialog.prompt(2,'输入层标题','默认值','aa',['600px','365px']);">
				<input type="button" value="输入层" onclick="layerDialog.prompt(2,'输入层标题','默认值','aa',['800px','365px']);">
			</div>
			<div class="layout-descrip">
			</div>
		</div>
	</div>

	<div class="layout-item">
		<div class="layout-accordion">
			<div class="layout-title">#tab层 - layerDialog.tab(options)此层不适合作为通用案例，请按需开发。</div>
			<div class="layout-content">
				<input type="button" value="tab层" onclick="layerDialog.tab();">
			</div>
			<div class="layout-descrip">
			</div>
		</div>
	</div>

<!-- <div class="layout-item">
	<div class="layout-accordion">
		<div class="layout-title">confirm</div>
		<div class="layout-content">
			<input type="button" value="confirm" onclick="layerDialog.confirm();">
		</div>
	</div>
</div> -->
	 	
	<h2 style="text-align: center; color: #fff; background-color: #1266f1; margin: 0; padding: 0; border-radius: 12px;line-height: 48px;">拓展案例</span></h2>

	<div class="layout-item">
		<div class="layout-accordion">
			<div class="layout-title">success</div>
			<div class="layout-content">
				<input type="button" value="success" onclick="layerDialog.success('success点击提示','',5000);">
				<input type="button" value="successGo" onclick="layerDialog.successGo('successGo点击提示','url','',5000);">
			</div>
		</div>
	</div>
	
	<div class="layout-item">
		<div class="layout-accordion">
			<div class="layout-title">info</div>
			<div class="layout-content">
				<input type="button" value="info" onclick="layerDialog.info('info点击提示','',5000);">
				<input type="button" value="infoGo" onclick="layerDialog.infoGo('infoGo点击提示','url','',5000);">
			</div>
		</div>
	</div>
	
	<div class="layout-item">
		<div class="layout-accordion">
			<div class="layout-title">warming</div>
			<div class="layout-content">
				<input type="button" value="warming" onclick="layerDialog.warming('warming点击提示','',5000);">
				<input type="button" value="warmingGo" onclick="layerDialog.warmingGo('warmingGo点击提示','url','',5000);">
			</div>
		</div>
	</div>
	
	<div class="layout-item">
		<div class="layout-accordion">
			<div class="layout-title">error</div>
			<div class="layout-content">
				<input type="button" value="error" onclick="layerDialog.error('error点击提示','',5000);">
				<input type="button" value="errorGo" onclick="layerDialog.errorGo('errorGo点击提示','url','',5000);">
			</div>
		</div>
	</div>

	<div class="layout-item">
		<div class="layout-accordion">
			<div class="layout-title">confirm</div>
			<div class="layout-content">
				<input type="button" value="confirm" onclick="layerDialog.confirm('confirm点击提示');">
				<input type="button" value="confirmGo" onclick="layerDialog.confirmGo('confirmGo点击提示');">
			</div>
		</div>
	</div>
	
	<div class="layout-item">
		<div class="layout-accordion">
			<div class="layout-title">loading</div>
			<div class="layout-content">
				<input type="button" value="loading" onclick="layerDialog.loading(0, '#fff', '0.5');">
			</div>
		</div>
	</div>

	<div class="layout-item">
		<div class="layout-accordion">
			<div class="layout-title">iframe</div>
			<div class="layout-content">
				<input type="button" value="打开百度iframe" onclick="layerDialog.iframe('百度', 'http://www.baidu.com','893px', '600px', false);">
			</div>
		</div>
	</div>
<!-- 	
<div class="layout-item">
	<div class="layout-accordion">
		<div class="layout-title"></div>
		<div class="layout-content">
		</div>
	</div>
</div>
 -->
</body>
</html>